<template>
    <scroll-view style="height: 100%;" :scroll-into-view="intoIndex" scroll-y="true" scroll-with-animation @scroll="scroll">
        <view class="network">
            <view :id="'slot' + 0" >
                <view class="item-title">
                    <view class="title">
                        <view class="txt">
                            {{ '消防供电配电'}}
                        </view>
                        <view class="bg"></view>
                    </view>
                    <ImgUpload :title="form['消防供电配电'].fileList" :fileList="form['消防供电配电'].fileList" @change="(val) => fileChange(val, '消防供电配电')">
                    </ImgUpload>
                </view>

                <view class="child">
                    <view class="child-title">
                        <view class="title">{{ '消防配电' }}</view>
                        <view class="canUse">
                            <view class="btn" @tap="canUseChange('0', 'key')" :class="{ active: canUse === '0' }">无
                            </view>
                            <view class="btn" @tap="canUseChange('1', 'key')" :class="{ active: canUse === '1' }">有
                            </view>
                        </view>
                    </view>
                    <view class="dec">
                        试验屋顶消火栓放水及静压
                    </view>
                    <textarea :maxlength="-1"  class="my-textarea" placeholder="实测记录"></textarea>
                </view>

                <view class="child">
                    <view class="child-title">
                        <view class="title">室外消火栓</view>
                        <view class="canUse">
                            <view class="btn" @tap="canUseChange('0', 'key')" :class="{ active: canUse === '0' }">无
                            </view>
                            <view class="btn" @tap="canUseChange('1', 'key')" :class="{ active: canUse === '1' }">有
                            </view>
                        </view>
                    </view>
                    <view class="dec">
                        试验屋顶消火栓放水及静压
                    </view>
                    <textarea :maxlength="-1"  class="my-textarea" placeholder="实测记录"></textarea>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script>
export default {
    props: {
        intoIndex: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: []
        }
    },
    // 局部注册的组件
    components: {},
    computed: {

    },
    data() {
        return {
            fileList: [],
            canUse: '0',
            form: {
                '消防供电配电': {
                    fileList: [],
                    "消防配电": {
                        '检测内容': '试验主、备电切换功能',
                        '实测记录': ''
                    }
                }
            },

        }
    },
    // 计算属性
    computed: {},
    // 组件方法
    methods: {
        scroll(e) {
            //console.log(e.detail.scrollTop)
        },
        fileChange(val, key = '') {
            this.form[key].fileList = val
        },
        canUseChange(val, key = '') {
            this.canUse = val
        }

    },
}
</script> 

<style scoped lang="scss" src="./assets/index.scss"></style>
